import {
  View,
  StyleSheet,
  KeyboardAvoidingView,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import { Text } from "@/components/ui/Text";
import { useState } from "react";
import { router, useLocalSearchParams, Stack } from "expo-router";

import { Card } from "@/components/ui/Cards";
import { TextArea } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import { Section, SectionHeader } from "@/components/ui/Sections";
import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { useUpdateTrigger, useTrigger } from "@/hooks";
import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
import { TriggerCategory } from "@/constants/triggers";
import { TRIGGER_CATEGORY_DEFINITIONS } from "@/constants/trigger-categories";
import { TimePicker } from "@/components/ui/TimePicker";
import type { Trigger } from "@/lib/api";

const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] =
  TRIGGER_CATEGORY_DEFINITIONS.map((d) => ({
    label: d.label,
    value: d.id,
    icon: <MaterialIcons size={16} color={d.color} name={d.icon} />,
  }));

export default function EditTrigger() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: trigger, isLoading } = useTrigger(id);

  if (isLoading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" color={Colors.light.tint} />
      </View>
    );
  }

  if (!trigger) {
    return null;
  }

  return <EditTriggerForm id={id} trigger={trigger} />;
}

function EditTriggerForm({ id, trigger }: { id: string; trigger: Trigger }) {
  const updateTrigger = useUpdateTrigger();

  const [moment, setMoment] = useState(new Date(trigger.moment));
  const [comment, setComment] = useState(trigger.comment || "");
  const [category, setCategory] = useState(trigger.category);

  const save = async () => {
    const data = {
      moment,
      comment,
      category,
    };

    await updateTrigger.mutateAsync({ id: String(id), payload: data });
    router.back();
  };

  return (
    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
      <Stack.Screen options={{ title: "Editar Registro" }} />
      <ScrollView scrollEventThrottle={16}>
        <View style={styles.container}>
          <View style={styles.header}>
            <View style={styles.innerHeaderWrapper}>
              <View style={[styles.headerIcon, { backgroundColor: "#FFF7ED" }]}>
                <Ionicons name="flash-outline" size={20} color="#EA580C" />
              </View>

              <View style={styles.headerTitleSubtitle}>
                <Text style={styles.headerTitle}>Editar Gatilho</Text>
                <Text style={styles.headerSubtitle}>
                  Atualize os dados do acontecimento
                </Text>
              </View>
            </View>

            <Text style={styles.description}>
              Você pode editar este registro nos primeiros 5 minutos após a
              criação.
            </Text>
          </View>

          <Section>
            <SectionHeader title="Horário do Evento" />
            <TimePicker value={moment} onChange={setMoment} />
          </Section>

          <Section>
            <SectionHeader title="Selecionar uma categoria" />
            <CategoryChips
              options={TRIGGER_CATEGORIES}
              active={category}
              onChange={setCategory}
            />
          </Section>

          <Section>
            <SectionHeader title="Adicione detalhes" />

            <Card style={styles.mainCard}>
              <TextArea
                label="Comentários sobre"
                variant="darkGhost"
                onChangeText={(val) => setComment(val)}
                value={comment}
                minRows={5}
                maxRows={10}
                placeholder="Descreva o que gerou esse sentimento"
              />
            </Card>
          </Section>

          <Button
            title="Salvar Alterações"
            onPress={save}
            loading={updateTrigger.isPending}
            disabled={updateTrigger.isPending}
          />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 24,
    paddingHorizontal: Spacing.containerPadding,
    paddingVertical: Spacing.sectionGap,
    marginBottom: 50,
  },
  mainCard: {
    padding: Spacing.cardGap,
  },
  header: {},
  headerIcon: {
    paddingVertical: 15,
    paddingHorizontal: 14,
    width: 48,
    borderRadius: BorderRadius.md,
  },
  innerHeaderWrapper: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  headerTitleSubtitle: {
    marginLeft: 10,
  },
  headerTitle: {
    ...Typography.headlineMd,
  },
  headerSubtitle: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
  },
  description: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
    marginTop: 20,
  },
  keyboardView: {
    flex: 1,
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});